<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>多选下拉框</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!-- 树组件start -->
		<script type="text/javascript" src="../../libs/js/tree/ztree/ztree.js"></script>
		<link type="text/css" rel="stylesheet" href="../../libs/js/tree/ztree/ztree.css">
		<!-- 树组件end -->

		<!-- 树形下拉框start -->
		<script type="text/javascript" src="../../libs/js/form/selectTree.js"></script>
		<!-- 树形下拉框end -->

	</head>

	<body>
		<div class="page_content">

			<div class="groupTitle"><span>组件说明</span></div>

			多选下拉框实际是树形下拉框的衍伸，属性直接继承树形下拉框。 这些示例与“树形下拉框”用法类似：<br/> 使用隐藏域，close事件， 禁用/启用，自定义图标，自定义节点展开/收缩时的图标，自定义尺寸（下拉框宽度和高度、文本框宽度），下拉框展开方向，可编辑，节点集成动态操作，表单重置。 请参考“树形下拉框”一节。<br/>

			<div class="height_15"></div>

			<div class="groupTitle"><span>1、基本多选下拉框(本地数据)</span></div>

			<p>使用本地数据时，除了可以添加数据到组件标签的data属性中，还可以使用本地数据动态设置data。参见：“树形下拉框”</p>
			<div class="selectTree" id="selectTree1" multiMode="true" noGroup="true" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"员工1"},{ "id":"2", "parentId":"0", "name":"员工2"},{ "id":"3", "parentId":"0", "name":"员工3"},{ "id":"4", "parentId":"0", "name":"员工4"}]}'></div>
			<br/><br/><input type="button" value="获取值" onclick="getValue()" />
			<div class="height_15"></div>
			选择结果后鼠标移入不提示
			<br/>
			<div class="selectTree"  multiMode="true" noGroup="true" showInfo="false" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"员工1"},{ "id":"2", "parentId":"0", "name":"员工2"},{ "id":"3", "parentId":"0", "name":"员工3"},{ "id":"4", "parentId":"0", "name":"员工4"}]}'></div>
<br/>
			<div class="height_15"></div>

			<div class="groupTitle"><span>2、基本多选下拉框(远程数据)</span></div>

			<div class="red">此示例由后台支持</div>
			<p>使用远程数据时，除了使用url，还可以使用url+参数，ajax请求然后动态设置data。参见：“树形下拉框”</p>
			<!--
     	<div class="selectTree" url="../../organizationAction.do?method=getTreeDataOfList" multiMode="true" noGroup="true"></div>
		 -->

			<div class="height_15"></div>

			<div class="groupTitle"><span>3、树形多选下拉框(父节点不可选)</span></div>

			<p>这里设置数据的父节点不可选，并且设置点击父节点展开子节点</p>
			<div class="selectTree" id="selectTree3" multiMode="true" keepDefaultStyle="true"></div>
			<br/>另外此处采用动态设置data方式获取数据。

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、树形多选下拉框(父节点作为单独的一项可选)</span></div>

			<div class="red">此示例由后台支持</div>
			<p> 这里设置数据的父节点可选，并且不展开子节点。这样点击就会选中该节点，子节点与父节点无关。</p>
			<!--
     	  <div class="selectTree" url="../../organizationAction.do?method=getTreeSimpleData" multiMode="true"></div>
		  -->
			<br/>另外此处采用url方式获取数据。

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、树形多选下拉框(点击父节点全选)</span></div>

			<p>设置点击展开子节点，然后设置组件可全选属性。这样点击会展开并全选子节点。</p>
			此示例全选后保留父节点的值。<br/>
			<div class="selectTree" id="selectTree5-1" multiMode="true" allSelectable="true" keepDefaultStyle="true"></div>
			<br/><br/> 此示例全选后不保留父节点的值。
			<br/>
			<div class="selectTree" id="selectTree5-2" multiMode="true" allSelectable="true" exceptParent="true" keepDefaultStyle="true"></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>6、设置初始值</span></div>

			<div class="selectTree" id="selectTree6" multiMode="true" selectedValue="11,12,21" data='{"treeNodes":[{"id":"1","parentId":"0","name":"部门部门部门部门部门部门部门部门1","nocheck":"true","clickExpand":"true","open":"true"},{"id":"11","parentId":"1", "name":"员工1"},{"id":"12","parentId":"1", "name":"员工2"},{"id":"13","parentId":"1", "name":"员工3"},{"id":"2","parentId":"0","name":"部门2","nocheck":"true","clickExpand":"true","open":"true"},{"id":"21","parentId":"2", "name":"员工4"}]}'></div>
			<br/><br/><input type="button" value="获取值" onclick="getSelectValue()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>7、动态生成树形下拉框</span></div>

			<div class="red">此示例由后台支持</div>
			<input type="button" value="点击生成(使用url)" style="width:120px;" id="testBtn" onclick="dynamicSelTreebox1()" /><br/><br/>
			<input type="button" value="点击生成(使用data)" style="width:120px;" id="testBtn2" onclick="dynamicSelTreebox2()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>8、动态修改树形下拉框</span></div>

			<div class="selectTree" id="selectTree8" multiMode="true" data='{"treeNodes":[{"id":"1","parentId":"0","name":"部门1","nocheck":"true","clickExpand":"true","open":"true"},{"id":"11","parentId":"1", "name":"员工1"},{"id":"12","parentId":"1", "name":"员工2"},{"id":"13","parentId":"1", "name":"员工3"},{"id":"2","parentId":"0","name":"部门2","nocheck":"true","clickExpand":"true","open":"true"},{"id":"21","parentId":"2", "name":"员工4"}]}'></div>
			<br/><br/><input type="button" value="选中“员工1，员工4”" onclick="selectItem()" style="width:120px;" />
			<input type="button" value="追加一项" onclick="appendItem()" style="width:120px;" />
			<input type="button" value="移除“员工2”" onclick="removeItem()" style="width:120px;" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>9、获得选中节点自定义属性</span></div>

			<div class="selectTree" id="selectTree9" multiMode="true" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true","myFlag":"部门1-自定义属性"},{ "id":"11", "parentId":"1", "name":"员工1","myFlag":"员工1-自定义属性"},{ "id":"12", "parentId":"1", "name":"员工2","myFlag":"员工2-自定义属性"},{ "id":"13", "parentId":"1", "name":"员工3","myFlag":"员工3-自定义属性"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true","myFlag":"部门2-自定义属性"},{ "id":"21", "parentId":"2", "name":"员工4","myFlag":"员工4-自定义属性"}]}'></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>10、节点异步加载</span></div>

			<div class="red">此示例由后台支持</div>
			<!--
     	    <div class="selectTree" asyncMode="true" url="../../organizationAction.do?method=async" multiMode="true"></div>
			-->

			<div class="height_15"></div>
		</div>

		<script type="text/javascript">
			var zNodes2 = {
				"treeNodes": [{
					id: 1,
					parentId: 0,
					name: "部门1",
					nocheck: true,
					clickExpand: true
				}, {
					id: 11,
					parentId: 1,
					name: "员工1"
				}, {
					id: 12,
					parentId: 1,
					name: "员工2"
				}, {
					id: 13,
					parentId: 1,
					name: "员工3"
				}, {
					id: 2,
					parentId: 0,
					name: "部门2",
					nocheck: true,
					clickExpand: true
				}, {
					id: 21,
					parentId: 2,
					name: "员工4"
				}]
			};

			var zNodes3 = {
				"treeNodes": [{
					id: 1,
					parentId: 0,
					name: "部门1",
					clickExpand: true
				}, {
					id: 11,
					parentId: 1,
					name: "员工1"
				}, {
					id: 12,
					parentId: 1,
					name: "员工2"
				}, {
					id: 13,
					parentId: 1,
					name: "员工3"
				}, {
					id: 2,
					parentId: 0,
					name: "部门2",
					clickExpand: true
				}, {
					id: 21,
					parentId: 2,
					name: "员工4"
				}]
			};

			function initComplete() {
				//赋给data
				$("#selectTree3").data("data", zNodes2);
				$("#selectTree3").render();

				//赋给data
				$("#selectTree5-1").data("data", zNodes3);
				$("#selectTree5-1").render();

				$("#selectTree5-2").data("data", zNodes3);
				$("#selectTree5-2").render();

				//数据自定义属性
				$("#selectTree9").bind("change", function() {
					if(!$(this).attr("relValue")) {
						top.Toast("showNoticeToast", "没有选择节点");
					} else {
						var nodes = $(this).data("selectedNodes");
						var values = [];
						for(var i = 0; i < nodes.length; i++) {
							values.push(nodes[i].myFlag);
						}
						top.Toast("showNoticeToast", values.join(","))
					}
				})
			}
			//获取值
			function getValue() {
				top.Toast("showNoticeToast", "选中节点文本：" + $("#selectTree1").attr("relText") + "；选中节点id：" + $("#selectTree1").attr("relValue"));
			}

			//获取选择值
			function getSelectValue() {
				top.Toast("showNoticeToast", "选中节点文本：" + $("#selectTree6").attr("relText") + "；选中节点id：" + $("#selectTree6").attr("relValue"));
			}

			//动态生成树形下拉框（使用url）
			function dynamicSelTreebox1() {
				//获取远程数据
				/*
var $selTree = $('<div class="selectTree" multiMode="true"></div>');
		//设置url属性
		$selTree.attr("url","../../organizationAction.do?method=getTreeSimpleData"); 
		//设置选中项
		$selTree.attr("selectedValue","11,12,23"); 
		//将下拉框加到按钮的后面
		$("#testBtn").after($selTree);   
		$("#testBtn").after("<br/>"); 
		//渲染树形下拉框 
		$selTree.render(); 
*/
			}

			//动态生成树形下拉框（使用data）
			function dynamicSelTreebox2() {
				//获取远程数据
				/*
$.post("../../organizationAction.do?method=getTreeSimpleData",{},function(result){
			var $selTree = $('<div class="selectTree" multiMode="true"></div>');
			//赋给data属性
			$selTree.attr("data",JSON.stringify(result)); 
			//设置选中项
			$selTree.attr("selectedValue","11,12,23"); 
			//将下拉框加到按钮的后面
			$("#testBtn2").after($selTree);   
			$("#testBtn2").after("<br/>"); 
			//渲染树形下拉框 
			$selTree.render(); 
		},"json");
*/
			}

			//动态选中项
			function selectItem() {
				$("#selectTree8").setValue("11,21");
			}
			//追加一项
			function appendItem() {
				$("#selectTree8").addItem({
					id: 100,
					parentId: 2,
					name: "员工5"
				});
			}
			//移除项
			function removeItem() {
				$("#selectTree8").removeItem("12");
			}
		</script>

	</body>

</html>